<template>
  <div class="wrap"> <!-- 外框，固定宽度 -->
    <div ref='contlist' class='box' @mouseover="stopScroll" @mouseout="startScroll">  <!-- 内部滚动框 -->
      <div class='marquee' ref="marquee">
        <slot name='content'/>
      </div>  <!-- 展示的文字 -->
      <div class='copy' ref="copy"></div>  <!--  文字副本，为了实现无缝滚动 -->
    </div>
   <div ref="node" style='height:0px'></div>  <!-- 为了获取text实际宽度 -->
  </div>
</template>
<script>
export default {
  name: 'Marquee',
  data () {
    return {
      text: '', // 数组文字转化后的字符串
    scrollTime:-1,
    distance:0,
    copydistance:0

    }
  },
  methods: {
    //鼠标悬停，停止滚动
    stopScroll () {
        var target = this.$refs.contlist;
        clearInterval(this.scrollTime)
    },
    //鼠标移开 ，接着滚动
    startScroll () {
        var target = this.$refs.contlist;
        this.move()
    },
    move () {
// 获取文字text 的计算后宽度  （由于overflow的存在，直接获取不到，需要独立的node计算）
      let width = this.$refs.node.getBoundingClientRect().width,
       box = this.$refs.contlist,
       marquee=this.$refs.marquee,
       copy = this.$refs.copy;
      copy.innerHTML = marquee.innerHTML // 文字副本填充
      let textWidth=marquee.getBoundingClientRect().width;
      if(this.scrollTime!=-1){
          clearInterval(this.scrollTime);
          this.scrollTime=-1;
      }
      if(width<textWidth){
        //设置位移
        let t=this;
        this.scrollTime = setInterval(function () {
            t.distance = t.distance - 1,t.copydistance=t.copydistance-1;
            // 如果位移超过文字宽度，则回到起点
            if (-t.distance >= textWidth) {
                t.distance = textWidth;
            }
            if (-t.copydistance >= textWidth*2) {
                t.copydistance = 0;
            }
            copy.style.transform= 'translateX(' + t.copydistance + 'px)'
            marquee.style.transform = 'translateX(' + t.distance + 'px)'
        }, 20)
      }
    }
  },
// 把父组件传入的arr转化成字符串
  mounted: function () {
    this.$nextTick(()=>{
        this.move()
    })
  },
}
</script>
<style lang="scss">
.wrap{
    overflow: hidden;
    .box {
        width: 80000%;
        div {
            float: left;
        }
    }
    .marquee{
        margin: 0 16px 0 0;
    }
    .node {
        position: absolute;
        z-index: -999;
        top: -999999px;
    }
}

</style>